<!-- 歌曲播放主页面 -->
<template>
  <div>
    <!-- 顶部 -->
    <van-sticky>
      <div class="top_div">
        <div class="return_div" @click="this.$router.back()">
          <van-icon name="arrow-left" />
        </div>
        <div class="top_title">后来</div>
        <div class="share_dot" @click="shareShow = true">
          <van-icon name="ellipsis" size="20px" />
        </div>
      </div>
    </van-sticky>

    <!-- 歌曲歌词 -->
    <div class="lyric_main">
        作词 : 施人诚
        作曲 : 玉城千春
        后来 我总算学会了如何去爱
        可惜你早已远去消失在人海
        后来终于在眼泪中明白
        有些人一旦错过就不在
        栀子花 白花瓣
        落在你蓝色百褶裙上
        爱我 你轻声说
        我低下头 闻见一阵芬芳
        那个永恒的夜晚
        十七岁仲夏
        你吻我的那个夜晚
        让我往后的时光
        每当有感叹
        总想起当天的星光
        那时候的爱情
        为什么就能那样简单
        而又是为什么 人年少时
        一定要让深爱的人受伤
        在这相似的夜里
        你是否一样 也在静静追悔感伤
        如果当时我们能
        不那么倔强
        现在也 不那么遗憾
        你都如何回忆我
        带着笑或是很沉默
        这些年来
        有没有人能让你不寂寞
        后来 我总算学会了如何去爱
        可惜你 早已远去消失在人海
        后来终于在眼泪中明白
        有些人一旦错过就不在
        你都如何回忆我
        带着笑或是很沉默
        这些年来
        有没有人能让你不寂寞
        后来
        我总算学会了如何去爱
        可惜你早已远去消失在人海
        后来终于在眼泪中明白
        有些人一旦错过就不在
        后来 我总算学会了如何去爱
        可惜你早已远去消失在人海
        后来终于在眼泪中明白
        有些人一旦错过就不在
        永远不会再重来
        有一个男孩爱着那个女孩
    </div>

    <!-- 分享面板 -->
    <van-share-sheet
      v-model:show="shareShow"
      title="立即分享给好友"
      :options="shareOptions"
      @select="goShare"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      shareShow: false, // 分享面板展示
      shareOptions: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ], // 分享面板里面的内容
    }
  },
  created(){

  },
  methods:{
    // 点击分享
    goShare(options, index) {
      this.$toast({
        message: options.name,
        icon: options.icon,
        duration: 1000,
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.top_div {
  width: 100%;
  height: 2em;
  background-color: #00cccc;
  color: aliceblue;
  padding-top: 2em;
  display: flex;
}
.top_title {
  width: 40%;
  // background-color: blue;
  text-align: center;
  margin-left: 3.8em;
  margin-right: auto;
  color: rgb(249, 239, 221);
  font-weight: 600;
}
.return_div {
  width: 30px;
  // background-color: blue;
  padding-left: 20px;
}
.share_dot {
  position: relative;
  right: 10px;
}
.lyric_main{
    color: aliceblue;
    background-color:	#8000808a;
    width: 100%;
    height: 90vh;
    white-space: pre-wrap;
}
</style>
